<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 600px;
      margin: 100px auto;
    }

    .message {
      display: inline-block;
      font-size: 12px;
      color: #999;
      background: url(../../images/mess.png) no-repeat left center;
      padding-left: 20px;
    }

    .wrong {
      color: red;
      background-image: url(../../images/wrong.png);
    }

    .right {
      color: green;
      background-image: url(../../images/right.png);
    }
  </style>
</head>
<body>
<div>
  <input type="password" name="" id="">
  <p class="message"></p>
</div>
<script>
  var input = document.querySelector('input');
  var message = document.querySelector('.message');

  input.onblur = function () {
    if(this.value.length < 6 || this.value.length > 16){
      message.className = 'message wrong';
      message.innerHTML = '输入不合规范'
    } else {
      message.className = 'message right';
      message.innerHTML = '输入符合规范';
    }
  }
</script>
</body>
</html>